import React from 'react';
import './ThirdPartyLogin.css';

const ThirdPartyLogin = ({ onLoginSuccess, onLoginError }) => {
  const handleThirdPartyLogin = async (type) => {
    try {
      console.log(`开始${type === 'qq' ? 'QQ' : '微信'}登录`);
      
      // 获取登录链接
      const response = await fetch(`http://localhost:3001/lxt/shuidi-login?type=${type}`);
      const data = await response.json();
      
      if (data.code === 200) {
        console.log('获取登录链接成功:', data.loginUrl);
        // 跳转到水滴聚合登录页面
        window.location.href = data.loginUrl;
      } else {
        console.error('获取登录链接失败:', data.msg);
        onLoginError && onLoginError(data.msg);
      }
    } catch (error) {
      console.error('第三方登录失败:', error);
      onLoginError && onLoginError('登录失败，请重试');
    }
  };

  return (
    <div className="third-party-login">
      <div className="divider">
        <span>或</span>
      </div>
      
      <div className="login-buttons">
        <button 
          className="login-btn wechat-btn"
          onClick={() => handleThirdPartyLogin('wechat')}
        >
          <i className="wechat-icon">微信</i>
          微信登录
        </button>
        
        <button 
          className="login-btn qq-btn"
          onClick={() => handleThirdPartyLogin('qq')}
        >
          <i className="qq-icon">QQ</i>
          QQ登录
        </button>
      </div>
    </div>
  );
};

export default ThirdPartyLogin; 